<!-- 完成维修-发票信息 -->
<template>
	<Card :showBodySlot="ShowBody">
		<template #head>
			<view class="u-flex">
				<view class="u-flex-1">
					发票信息
				</view>
				<view class="u-flex-1 u-text-right">
					<u-switch @change="onChange" v-model="formData.isVoice" active-color="#409EFF" inactive-color="#eee"></u-switch>
				</view>
			</view>
		</template>
		<template #body>
			<CellItem required label="发票类型" v-model="formData.invoiceType" dicKey="Invoice_type"></CellItem>
			<CellField required label="发票号" v-model="formData.invoiceNum"></CellField>
			<CellAttachment :showVideo="false" title="发票附件" v-model="formData.invoiceAttachment"></CellAttachment>
		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	import CellAttachment from '@/components/cell/itemAttachment.vue'
	export default {

		components: {
			Card,
			CellAttachment
		},
		data() {
			return {
				formData: {
					isVoice: false,
					invoiceType: '',
					invoiceNum: '',
					invoiceAttachment: [],
				},
			}
		},
		computed: {
			ShowBody() {
				return this.formData.isVoice
			}
		},

		methods: {
			onChange(val) {
				if (!val) {
					this.formData = {
						isVoice: val,
						invoiceType: '',
						invoiceNum: '',
						invoiceAttachment: [],
					}
				}
			},
			validate() {

				if (this.formData.isVoice) {
					let msg = ''
					if (!this.formData.invoiceType) {
						msg = '请选择发票类型'
					} else if (!this.formData.invoiceNum) {
						msg = '输入发票号'
					} else {
						msg = ''
					}
					if (!msg) {
						return true
					}
					wx.showToast({
						title: msg,
						icon: 'error'
					})
					return false

				}
				return true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		&-value {
			display: block;
			font-weight: 400;
			font-size: 28rpx;
			color: #409EFF;
			text-align: right;
		}

		&-content {
			text-align: right;
		}
	}

	.attachment {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
